<template>
  <div id="internals" style="height: 300px"></div>
</template>

<script>
import { onMounted,onBeforeMount,onUnmounted} from "vue";
import * as echarts from "echarts";
import request from "../../http/request";
export default {
  setup() {
    let time;
    onMounted(async () => {
      const internals = echarts.init(document.getElementById("internals"));
       const userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
      let data, info;
      data = await request.memory({
        user_id:userInfo.user_id
      });
      info = [
        { value: data.data.data[0].mempercent, name: "已使用" },
        {
          value: data.data.data[0].un_mempercent,
          name: "未使用",
        },
      ];
      const option = {
        color: ["#da515b", "#42a78e"],
        tooltip: {
          trigger: "item",
          formatter: ({ data }) => {
            return `${data.value}%`;
          },
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "内存占用率",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: info,
          },
        ],
      };
      internals.setOption(option);
      // time=setInterval(async () => {
      //   internals.clear();
      //   data = await request.memory({
      //     user_id:userInfo.user_id
      //   });
      //   option.series = [
      //     {
      //       name: "内存占用率",
      //       type: "pie",
      //       radius: ["40%", "70%"],
      //       avoidLabelOverlap: false,
      //       label: {
      //         show: false,
      //         position: "center",
      //       },
      //       emphasis: {
      //         label: {
      //           show: true,
      //           fontSize: "40",
      //           fontWeight: "bold",
      //         },
      //       },
      //       labelLine: {
      //         show: false,
      //       },
      //       data: [
      //         { value:data.data.data[0].mempercent, name: "已使用" },
      //         {
      //           value: data.data.data[0].un_mempercent,
      //           name: "未使用",
      //         },
      //       ],
      //     },
      //   ];
       
      

      //   internals.setOption(option);
      // }, 5000);

      window.onresize = () => {
        internals.resize();
      };
    });
    
  },
};
</script>

<style>
</style>